import * as THREE from 'three';
// 导入 轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// 导入 gsap
import { gsap } from 'gsap';
/**
 *  目标：设置控制器阻尼、根据屏幕大小自动缩放
 */

// 创建场景
const scene = new THREE.Scene();

// 创建相机 fov（角度）, aspect （宽高比）, near 近裁剪面，far 远裁剪面
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

camera.position.set(0,0,10)
scene.add(camera);

// 添加物体
// 添加几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// 添加材质
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
// 创建物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 设置位置
cube.position.x = 0;
cube.position.y = 0;
cube.position.z = 0;

// 缩放
cube.scale.set(3, 2, 1);
// 旋转
cube.rotation.set(0.5*Math.PI, 0.5*Math.PI,0 );

// 添加到场景中
scene.add(cube);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

// 将 webgl 渲染的 canvas 添加到 body 中
document.body.appendChild(renderer.domElement);

// 设置相机 和 场景 通过渲染器渲染
// renderer.render(scene,camera)

// 创建轨道控制器 (相机,用于渲染的dom)
const controls = new OrbitControls(camera, renderer.domElement);
 // 开启阻尼
controls.enableDamping = true;


// 添加坐标辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// 设置 clock
const clock = new THREE.Clock();

// 设置动画
const  animation1 = gsap.to(cube.position, {
    duration: 5,
    x: 5,
    ease: "linear",
    repeat: -1,
    yoyo:true,
    onComplete: () => {
        // alert("动画完成了")
    }
});
const  animation2 = gsap.to(cube.rotation, {
    z: Math.PI*0.5,
    duration: 5,
    ease: "power1.inOut",
    repeat: -1,
    yoyo:true,
});
const animations = [animation1,animation2]
/**
 *  绑定双击事件
 *  控制动画的暂停、继续
 */
let isPaused = false 
document.body.ondblclick = function(event) {
    if (event.type === 'dblclick') {
      if (isPaused) {
        animations.forEach(it => it.play())
      } else {
        animations.forEach(it => it.pause())
      }
      isPaused = !isPaused
    }
  };


/**
 * 渲染函数
 * L = V*T   距离 = 速度 * 时间
 */
function render(){
    
    controls.update()
    renderer.render(scene,camera)
    // 浏览器自带的 请求动画帧的方法 ，这里设置 没一帧都吊用一下 render 函数
    requestAnimationFrame(render)
}
render();

// 监听窗口大小变化
window.addEventListener('resize', onWindowResize, false);

function onWindowResize() {
    // 重新设置相机的宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    // 重新设置相机的裁剪面(投影矩阵)
    camera.updateProjectionMatrix();

    // 更新渲染器
    renderer.setSize(window.innerWidth, window.innerHeight);
    // 设置渲染器的像素比
    renderer.setPixelRatio(window.devicePixelRatio);
}